<template>
	<view>
		<view class="" id="topBox">
			<search @choose="chooseSearch" :data="scrollData" page="inventoryFood"></search>
			<u-line></u-line>
		</view>
		<template v-if="scrollHeight && scrollMenu.length>0">
			<inventoryMaterialList :data="scrollData" :menu="scrollMenu" :height="scrollHeight" :scroll_id="scrollViewId" @updata="updataBagList" :loadtime="loadtime" @scrollViewIdDone="scrollViewIdDone" page="inventoryFood"></inventoryMaterialList>
		</template>
		<view class="fixed-bottom" id="bottomBox">
			<u-line></u-line>
			<view class="flex bgw">
				<view class="bag-btn flex justify-center" @click="openBag">
					<u-badge type="error" :isDot="true" :absolute="true" :offset="[0, 0]"
						v-if="bagList.length > 0"></u-badge>
					<u-icon name="bag-fill" size="20" color="#675f91"></u-icon>
				</view>
				<view class="flex-1" v-if="bagList.length > 0">
					共 <text class="font-bold">{{ bagList.length }}</text>
					种食材
				</view>
				<view class="flex-1 text-red" v-else> 请添加食材 </view>
				<view :class="bagList.length == 0 ? 'disabled' : ''" class="save-btn ml15" @click="save">
					确认
				</view>
			</view>
		</view>
		<u-popup :show="popupShow" @close="popupClose" @open="popupOpen" mode="bottom" :closeable="true">
			<view class="flex justify-center" style="background-color: #f5f5f5; height: 44px">
				<view> 已添加的食材 </view>
			</view>
			<scroll-view scroll-y scroll-with-animation class="popup-scroll">
				<view class="">
					<template v-for="v in bagList">
						<view class="wrapper">
							<view class="blank10"></view>
							<view class="flex">
								<view class="flex-1">
									{{v.name}}
								</view>
								<view style="width: 150upx;">
									{{v.value}}
								</view>
							</view>
							<view class="blank10"></view>
							<u-line color="#e6e6e6"></u-line>
						</view>
					</template>
				</view>
			</scroll-view>
			<view class="wrapper" style="background-color: #f5f5f5">
				<view class="blank20"></view>
				<u-row justify="space-between" gutter="10">
					<u-col span="6">
						<u-button type="info" text="关闭" @click="popupShow = false"></u-button>
					</u-col>
					<u-col span="6">
						<u-button type="primary" :disabled="bagList.length == 0" text="确认" @click="save"></u-button>
					</u-col>
				</u-row>

				<view class="blank20"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import inventoryMaterialList from "@/pagesA/components/inventory-material-list/inventory-material-list";
	import search from "@/components/search.vue";
	
	import {
		new_stock_taking_record
	} from "@/common/api.js";

	let date = new Date();
	let year_month_day =
		`${date.getFullYear()}` +
		`-` +
		`${date.getMonth() + 1}`.padStart(2, "0") +
		`-` +
		`${date.getDate()}`.padStart(2, "0");

	export default {
		components: {
			inventoryMaterialList,
			search
		},
		data() {
			return {
				scrollViewId: 0,
				scrollHeight:'',
				scrollData:[],
				scrollMenu:[],
				id: 0,
				popupShow: false,
				need_day: year_month_day, //默认今天
				need_date: year_month_day,
				bagList: [],
				record_list: [],
				material_obj:{},
				loadtime:0
			};
		},
		computed: {},
		methods: {
			updataBagList(bagList) {
				this.bagList = bagList;
			},
			chooseSearch(id){
				this.scrollViewId = id;
			},
			scrollViewIdDone(){
				this.scrollViewId = 0;
			},
			openBag() {
				this.popupShow = true;
			},
			popupClose() {
				this.popupShow = false;
			},
			popupOpen() {},
			save() {
				if (this.bagList.length == 0) {
					uni.$u.toast("请添加食材");
					return;
				}
				let bagList = [];
				this.bagList.forEach(v => {
					v._id = this.material_obj[v.id].id; //接口原始数据中的id
					let item = {
						// id:this.material_obj[v.id].id,
						id:0,
						material_id:v.id,
						_material_id:this.material_obj[v.id].material_id[1],
						main_qty:v.value,
						stock_qty_before_taking:this.material_obj[v.id].stock_qty,
						status:'',
						stock_out_per_taking_cost_day:'-1',
						_main_unit_id:this.material_obj[v.id].main_unit_id[1],
						main_unit_id:this.material_obj[v.id].main_unit_id[0]
					};
					let main_qty = Number(item.main_qty) || 0;
					let profit = main_qty - item.stock_qty_before_taking;
					if(profit<0){
						item.status = 't2_stock_out';
					}else{
						item.status = 't3_stock_in';
					}
					bagList.push(item);
				})
				// console.log(bagList);
				// return;
				// # {'id': 1, 'material_id': 394326, 'main_qty': 20.0,
				// #         #  'main_unit_id': 9, 'stock_qty_before_taking': 10.0,
				// #         #  'status': 't3_stock_in', 'stock_out_per_taking_cost_day': '-1'},
				this.nav('/inventoryEdit/inventoryEdit?bagList='+JSON.stringify(bagList))
			},
			
			getData_callback(res) {
				let {update,unlink} = res.result;
				let update_value = {
					updateArr:update,
					delIds:unlink
				};
				this.$store.commit('update_stock', update_value);
				let stock = this.$store.getters.get_stock;
				let stock_obj = this.$store.getters.get_stock_obj;
				
				this.loadtime = new Date().getTime();
				this.scrollData = stock;
				this.scrollMenu = res.result['库位'] || [];
				this.material_obj = stock_obj;
				// let material_obj = {};
				// this.scrollData.forEach(v => {
				// 	material_obj[v.material_id[0]] = v;
				// })
				// this.material_obj = material_obj;
			},

			getData() {
				uni.showLoading({
					title: "加载中",
				});
				new_stock_taking_record()
					.then((res) => {
						this.getData_callback(res);
					})
					.catch(() => {})
					.finally(() => {
						uni.hideLoading();
						uni.stopPullDownRefresh();
					});
			},
		},
		onLoad(d) {
			this.status = d.status;
			this.id = Number(d.id) || 0;
			this.getData();
		},
		onShow() {
			uni.$off('refresh_inventoryFood');
			uni.$once('refresh_inventoryFood',()=>{
				this.getData();
			})
		},
		onReady() {
			uni.createSelectorQuery().select('#topBox').boundingClientRect(data => {
				let topBoxHeght = data.height;
				uni.createSelectorQuery().select('#bottomBox').boundingClientRect(data2 => {
					let bottomBoxHeight = data2.height;
					this.scrollHeight = this.getClineHeight() - topBoxHeght - bottomBoxHeight;
				}).exec()
			}).exec()
		},
		onPullDownRefresh() {
			this.getData();
		},
	};
</script>

<style lang="scss" scoped>
	@import "./inventoryFood.scss";
</style>